<template>
    <div class="home mobile-main">
        <!-- 顶部轮播图 -->
        <div class="h_rotation-chart">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
                <van-swipe-item v-for="item in bannerList" :key="item.bid" @click.prevent="goToLink(item.b_link)"><img :style="{ 'pointer-events': 'none' }" οnclick="return false" :src="item.b_path" alt=""></van-swipe-item>
            </van-swipe>
        </div>
        <div class="h-r-recomment">
            <!-- 按节气推荐 -->
            <recomment-list :list="solarTermList" :imgList="solarTermImgList"></recomment-list>
            <!-- 时间 -->
            <recomment-list :list="monthList" :imgList="monthImgList"></recomment-list>
            <!-- 主题 -->
            <recomment-list :list="themeList" :imgList="themeImgList"></recomment-list>
            <!-- 诗单 -->
            <recomment-list :type="2" :list="poemsList"></recomment-list>
            <!-- 诗人 -->
        </div>
    </div>
</template>

<script setup lang="ts" name="home">
import { defineComponent, onMounted, ref } from 'vue'
import { Cover } from './home.model'
import manageBannerStore from '@/page/administrator/index/page/manage-banner/manage-banner.store'
import homeStore from './home.store'
import RecommentList from './component/recomment-list.vue'

const homeSe = homeStore()

// 获取轮播图
const manageBannerSe = manageBannerStore()
let bannerList = ref<any>([])
const getBannerList = ()=> {
    homeSe.getBannerList().then((res: any) => {
        if(res.status == 'success') {
            bannerList.value = res.results
            bannerList.value.forEach((item: any) => {
                item.b_path = import.meta.env.VITE_BASE_URL + item.b_path
            })
        }
    })
}

// 跳转轮播图链接
const goToLink = (path: string) => {
    if(!path || path == '无' || path == '') return 
    window.open(path, '_self')
}

// 获取推荐
let solarTermList = ref<any>({})
let monthList = ref<any>({})
let themeList = ref<any>({})
const getRecomment = () => {
    homeSe.getRecomment().then((res: any) => {
        if(res.status == 'success') {
            solarTermList.value = res.results.solarTerm
            monthList.value = res.results.month
            themeList.value = res.results.theme
        }
    })
}
let poemsList = ref<any>({})
const getRecommentPoemsList = () => {
    const data = {
        pageNum: 1,
        pageSize: 5
    }
    homeSe.getRecommentPoemsList(data).then((res: any) => {
        if(res.status == 'success') {
            poemsList.value = res.results
            // res.results
        }
    })
}

let solarTermImgList = ref<any>([])
let monthImgList = ref<any>([])
let themeImgList = ref<any>([])
let imgList = new Cover()
const initImg = () => {
    solarTermImgList.value = imgList.getImgList().slice(0, 5)
    monthImgList.value = imgList.getImgList().slice(5, 10)
    themeImgList.value = imgList.getImgList().slice(10, 15)
}

onMounted(() => {
    getBannerList()
    getRecomment()
    getRecommentPoemsList()
    initImg()
})

</script>

<style lang="less" scoped>
.home {
    // height: 900rem;
    .h_rotation-chart {
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        height: 12rem;
        .van-swipe {
            width: 100%;
            height: 100%;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    .h-r-recomment {
        padding: 0 0.75rem;
        padding-bottom: 0.75rem;
        box-sizing: border-box;
        margin-top: 1rem;
        background-color: var(--bg-color);
    }
}
</style>